<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>品牌和产品</title>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/brand-content-page.css">

</head>
<body>
    <!-- 品牌和产品图片内容 -->
    <div class="brand-content">


        <div class="brand-content-title-options-modal none t20 lh30" id="brand-content-title-options-modal-id">
            <p class="brand-content-title-options-modal-title">美味甜甜圈</p>
            <p>
                甜甜圈，百滋百特秘制配方，纯手工制作，每一个圈都堪称经典。低糖低油，口感松软，外形精致。甜甜圈，
                <br />百滋百特秘制配方，纯手工制作，每一个圈都堪称经典。低糖低油，口感松软，外形精致··· 
            </p>
            <p>
                    甜甜圈，百滋百特秘制配方，纯手工制作，每一个圈都堪称经典。低糖低油，口感松软，外形精致。甜甜圈，
                <br />百滋百特秘制配方，纯手工制作，每一个圈都堪称经典。低糖低油，口感松软，外形精致··· 甜甜圈，百滋百特
                <br />秘制配方，纯手工制作，每一个圈都堪称经典。低糖低油，口感松软，外形精致。甜甜圈，百滋百特秘制配方，纯手工
                <br /> 制作，每一个圈都堪称经典。低糖低油，口感松软，外形精致···
            </p>
            <p>             
                甜甜圈，百滋百特秘制配方，纯手工制作，每一个圈都堪称经典。低糖低油，口感松软，外形精致。
            </p>
        </div>

        <!-- 标题 -->
        <div class="brand-content-title">
            <div class="brand-content-title-name pt20">
                <span class="mr50"><a>全部产品</a></span>
                <span><a>百兹百特</a></span>
            </div>
            
            <div class="brand-content-title-options pt10">
                <ul>
                    <li>
                        <a id="delicious_doughnut">美味甜甜圈</a>
                    </li>
                    <li>
                        <a>芝士蛋糕</a>
                    </li>
                    <li>
                        <a>闪电泡芙</a>
                    </li>
                    <li>
                        <a>慕斯甜甜圈</a>
                    </li>
                    <li>
                        <a>软欧圈</a>
                    </li>
                    <li>
                        <a>麦芬圈</a>
                    </li>
                    <li>
                        <a>起酥圈</a>
                    </li>
                    <li>
                        <a>常规蛋糕</a>
                    </li>
                    <li>
                        <a>果汁茶饮</a>
                    </li>
                </ul>
            </div>
        </div>

        <!-- 图片区 -->
        <div class="brand-content-pictures">
            <!-- 第一行 -->
            <div class="brand-content-pictures-level level1">
                <div class="level-left level-left1 mb50">
                    <img src="../images/brand-content/showP1.png" class="brand-content-picture" id="delicious_doughnut_image"/>
                    
                </div>
    
                <div class="level-mid level-mid1 mb50">
                    <img src="../images/brand-content/showP2.png" class="brand-content-picture" />
                   
                </div>
    
                <div class="level-right level-right1 mb50">
                    <img src="../images/brand-content/showP3.png" class="brand-content-picture" />
                    
                </div>
            </div>
            <!-- 第二行 -->
            <div class="brand-content-pictures-level level2">
                <div class="level-left level-left2 mb50">
                    <img src="../images/brand-content/showP4.png" class="brand-content-picture" />
                    
                </div>
                <div class="level-mid level-mid2 mb50">
                    <img src="../images/brand-content/showP5.png" class="brand-content-picture" />
                    
                </div>
                <div class="level-right level-right2 mb50">
                    <img src="../images/brand-content/showP6.png" class="brand-content-picture" />
                    
                </div>
            </div>
            <!-- 第三行 -->
            <div class="brand-content-pictures-level level2">
                <div class="level-left level-left2">
                    <img src="../images/brand-content/showP7.png" class="brand-content-picture" />
            
                </div>
                <div class="level-mid level-mid2">
                    <img src="../images/brand-content/showP8.png" class="brand-content-picture" />
            
                </div>
                <div class="level-right level-right2">
                    <img src="../images/brand-content/showP9.png" class="brand-content-picture" />
            
                </div>
            </div>
        </div>

    </div>

    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="../js/brand-hover.js"></script>
</body>
</html>